<template>
	<view class="resume-container">
		<button
			style="background-color: #ffaa00;position: fixed;margin-top: 35vh;margin-left: 85vw;border-radius: 15rpx;color: #ffffff;"
			@click="shareToFriend" size="mini" open-type="share"><uni-icons type="redo" color="#ffffff"></uni-icons>
		</button>

		<!-- 头像区域 -->
		<view class="header">
			<view class="avatar-container">
				<image class="avatar" :src="resume.photo || '/static/no_photo.png'" @click="seeImage(resume.photo)"
					mode="aspectFill"></image>
			</view>

			<!-- 基本信息 -->
			<view class="basic-info">
				<view class="name">{{resume.name}}</view>
				<view style="display: flex;flex-direction: row;">
					<view class="info-item">
						<uni-icons type="calendar" size="16" color="#ffffff"></uni-icons>
						<text>{{resume.age}}岁 | {{resume.sex === 1 ? '男' : '女'}}</text>
					</view>
					<view class="info-item" v-if="resume.hometown">
						<uni-icons type="home" size="16" color="#ffffff"></uni-icons>
						<text>家乡: {{resume.hometown}}</text>
					</view>
				</view>

				<view class="info-item" v-if="resume.workProvince || resume.workCity">
					<uni-icons type="location" size="16" color="#ffffff"></uni-icons>
					<text>工作地: {{resume.workProvince}}{{resume.workCity}}</text>
				</view>
				<view class="info-item" v-if="resume.startPrice || resume.endPrice">
					<uni-icons type="money" size="16" color="#ffffff"></uni-icons>
					<text>期望薪资: {{resume.startPrice}}~{{resume.endPrice}}元/月</text>
				</view>
			</view>
		</view>

		<!-- 简历内容区 -->
		<view class="content">
			<!-- 职业生涯 -->
			<view class="section" v-if="resume.career">
				<view class="section-title">
					<uni-icons type="calendar" size="18" color="#ff8800"></uni-icons>
					<text>从事职业</text>
				</view>
				<view class="section-content">
					<view class="skill-tags">
						<view class="skill-tag" v-if="career" v-for="(career, index) in careerList" :key="index">
							{{career}}
						</view>
					</view>
				</view>
			</view>

			<view class="section" v-if="seeUserId">
				<view class="section-title">
					<uni-icons type="contact" size="18" color="#ff8800"></uni-icons>
					<text>联系面试</text>
				</view>
				<view class="contact-row">
					<view class="contact-label"><uni-icons type="weixin" size="18" color="#00aa00"></uni-icons>微信</view>
					<button v-if="showWx===''" type="default" size="mini"
						class="contact-button primary-button highlight-btn" @click="seeWx">查看微信</button>
					<view class="contact-value">{{showWx}}</view>
					<button class="contact-button copy-button" size="mini" type="default" @click="copyText"
						v-if="showWx">复制</button>
				</view>

				<view class="contact-row">
					<view class="contact-label"><uni-icons type="phone" size="18" color="#ff5500"></uni-icons>电话面试
					</view>
					<view class="contact-value">{{showPhone}}</view>
					<button v-if="showPhone ==''" type="default" size="mini"
						class="contact-button primary-button highlight-btn" @click="callMeet()">发起面试</button>
					<button v-if="showPhone !=''" class="contact-button call-button" size="mini" type="default"
						@click="callPhone">拨打电话</button>
				</view>

				<view class="privacy-notice" v-if="showPhone !=''">注意：当前面试的号码为隐私号码，仅可使用当前账号绑定的手机号，在发起面试后的30分钟内拨打有效
				</view>
			</view>

			<!-- 工作技能 -->
			<view class="section" v-if="resume.workSkill">
				<view class="section-title">
					<uni-icons type="star" size="18" color="#ff8800"></uni-icons>
					<text>工作技能</text>
				</view>
				<view class="section-content">
					<view class="skill-tags">
						<view class="skill-tag" v-if="skill" v-for="(skill, index) in workSkillList" :key="index">
							{{skill}}
						</view>
					</view>
				</view>
			</view>

			<!-- 语言能力 -->
			<view class="section" v-if="resume.speakSkill">
				<view class="section-title">
					<uni-icons type="chat" size="18" color="#ff8800"></uni-icons>
					<text>语言技能</text>
				</view>
				<view class="section-content">
					<view class="skill-tags">
						<view class="skill-tag" v-if="skill" v-for="(skill, index) in speakSkillList" :key="index">
							{{skill}}
						</view>
					</view>
				</view>
			</view>

			<!-- 证书 -->
			<view class="section">
				<view class="section-title">
					<uni-icons type="medal" size="18" color="#ff8800"></uni-icons>
					<text>证书资质</text>
					<view v-if="resume.certificate !=1" style="margin-left: 30rpx;color: red;">未认定</view>
					<!-- 	<view v-if="!seeUserId && resume.certificate!=1" style="margin-left: 30rpx;"><button size="mini"
							style="scale: 1;background-color: #fcc4bf;color:red;font-weight: bold;"
							@click="toCertVerify">去认定</button></view> -->
				</view>
				<view class="section-content" v-if="resume.certificate === 1">
					<view class="cert-list">
						<view class="cert-item" v-for="(cert, index) in certListArray" :key="index">
							<uni-icons type="checkmarkempty" size="16" color="#ff8800"></uni-icons>
							<text>{{cert.name}}</text>
							<button @click="seeImage(cert.url)" size="mini"
								style="background-color: #a79900;color: #ffffff;"> 查看证书</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 个人介绍 -->
			<view class="section" v-if="resume.introduction">
				<view class="section-title">
					<uni-icons type="person" size="18" color="#ff8800"></uni-icons>
					<text>个人介绍</text>
				</view>
				<view class="section-content">
					<text>{{resume.introduction}}</text>
				</view>
			</view>

			<!-- 家庭情况 -->
			<view class="section" v-if="resume.family">
				<view class="section-title">
					<uni-icons type="home" size="18" color="#ff8800"></uni-icons>
					<text>家庭介绍</text>
				</view>
				<view class="section-content">
					<text>{{resume.family}}</text>
				</view>
			</view>
		</view>
		<uni-popup type="center" ref="popup">
			<view>
				<image :src="seeImageUrl" style="width: 80vw;" mode="widthFix" :draggable="true"></image>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				seeUserId: 0,
				resume: {
					userId: null,
					photo: '',
					workSkill: '',
					speakSkill: '',
					introduction: '',
					family: '',
					workProvince: '',
					workCity: '',
					certificate: 0,
					certList: '',
					career: '',
					startPrice: null,
					endPrice: null,
					name: '',
					hometown: '',
					birthday: null,
					sex: 1,
					favoriteId: null,
					age: 0
				},
				showWx: "",
				showPhone: "",
				params: {
					serviceId: 0
				},
				seeImageUrl: ''

			}
		},
		computed: {
			// 工作技能列表
			workSkillList() {
				return this.resume.workSkill ? this.resume.workSkill.split(',') : [];
			},
			// 语言技能列表
			speakSkillList() {
				return this.resume.speakSkill ? this.resume.speakSkill.split(',') : [];
			},
			// 职业生涯列表 (假设career字段是JSON字符串)
			careerList() {
				try {
					return this.resume.career ? this.resume.career.split(",") : [];
				} catch (e) {
					return [];
				}
			},
			// 证书列表
			certListArray() {
				return this.resume.certList ? JSON.parse(this.resume.certList) : [];
			}
		},
		onLoad(options) {
			// 在实际应用中，这里可能需要通过API获取简历数据
			// 示例：
			// const userId = options.userId || '';
			this.seeUserId = options.seeUserId;
			this.params.serviceId = this.seeUserId;
			this.getUnlockInfo();
			this.getResumeData(this.seeUserId);
			// 模拟数据
			// this.mockResumeData();
		},
		// 定义页面分享行为
		onShareAppMessage(res) {
			// res.from 来源，button：页面内分享按钮；menu：右上角分享菜单
			if (res.from === 'button') {
				console.log('来自页面内分享按钮');
			} else {
				console.log('来自右上角分享菜单');
			}

			return {
				title: '给你分享了一份简历',
				path: '/pages/share/shareResume?seeUserId=' + this.resume.userId, // 指定分享后打开的页面路径，必须是以 / 开头的完整路径
				imageUrl: this.resume.photo ? this.resume.photo : '/static/logo.png', // 自定义分享图片，可以是本地文件路径或者线上图片路径
				success(res) {
					// 分享成功的回调函数
					uni.showToast({
						title: '分享成功'
					});
				},
				fail(err) {
					// 分享失败的回调函数
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					});
				}
			};
		},
		methods: {
			// 获取简历数据
			getResumeData(seeUserId) {
				uni.showLoading({
					title: '加载中...'
				});
				let data = seeUserId ? {
					seeUserId
				} : {};
				this.$Request.postFormHost(this.$Api.getUserResume, data).then(res => {
					if (res.status === 0)
						this.resume = res.data;
					uni.hideLoading();
				})

			},

			seeImage(url) {
				this.seeImageUrl = url;
				this.$refs.popup.open();
			},
			//获取解锁显示的信息
			getUnlockInfo() {
				this.$Request.postFormHost(this.$Api.getUnlockInfo, this.params)
					.then(
						res => {
							if (res.status == 0) {
								if (res.data.hasWx == 1) {
									this.showWx = res.data.wx;
								} else
									this.showWx = "未绑定";
								if (res.data.hasPhone == 1) {
									this.showPhone = res.data.privatePhone;
								} else
									this.showPhone = "未绑定手机号";
							}
						});
			},
			seeWx() {
				this.$Request.postFormHost(this.$Api.seeWx, this.params)
					.then(
						res => {
							if (res.status == 0) {
								this.showWx = res.data;
							} else
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
						});
			},
			callMeet() {
				this.$Request.postFormHost(this.$Api.callMeet, this.params)
					.then(
						res => {
							if (res.status == 0) {
								this.showPhone = res.data;
							} else
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
						});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.showPhone
				});
			},
			//复制到粘贴板
			copyText() {
				uni.setClipboardData({
					data: this.showWx,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					}
				});
			},

			toCertVerify() {
				uni.navigateTo({
					url: '/pages/service/certVerify'
				});
			},
			shareToFriend() {
				// 调用系统分享菜单
				// 注意：这个方法只会触发onShareAppMessage，不会自动分享
				// 用户仍需在弹出的分享菜单中选择分享到哪里
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage']
				});
			},
			// 模拟数据(仅用于演示)
			mockResumeData() {
				this.resume = {
					userId: 1001,
					photo: 'https://picsum.photos/200',
					workSkill: '项目管理,沟通协调',
					speakSkill: '普通话,英语,粤语',
					introduction: '拥有5年互联网产品经验',
					family: '已婚，有一子',
					workProvince: '广东省',
					workCity: '深圳市',
					certificate: 1,
					certList: 'PMP项目管理认证,产品经理专业认证,UI设计师中级证书',
					career: '保姆,月嫂',
					startPrice: 25000,
					endPrice: 35000,
					name: '张三',
					hometown: '广东广州',
					birthday: new Date('1990-01-01'),
					sex: 1,
					age: 34
				};
			}
		}
	}
</script>

<style>
	page {
		background: none;
	}

	.resume-container {
		background-color: #fff8f0;
		/* 浅橙色背景 */
		padding-bottom: 30rpx;
	}

	.header {
		background: linear-gradient(135deg, #c69d0a, #8d4b00);
		/* 橙色渐变背景 */
		padding: 40rpx 30rpx 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		box-shadow: 0 4rpx 20rpx rgba(255, 136, 0, 0.3);
	}

	.avatar-container {
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 270rpx;
		height: 360rpx;
		border-radius: 10rpx;
		border: 4rpx solid #fff;
	}

	.basic-info {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.name {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		text-align: center;
	}

	.info-item {
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 10rpx;
		opacity: 0.9;
	}

	.info-item text {
		margin-left: 10rpx;
	}

	.content {
		padding: 20rpx 30rpx;
		margin-top: -30rpx;
	}

	.section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ffebda;
		padding-bottom: 15rpx;
	}

	.section-title text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-left: 10rpx;
	}

	.section-content {
		color: #5b5b5b;
		font-size: 28rpx;
		line-height: 1.6;
	}

	.skill-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.skill-tag {
		background-color: #ff9500;
		color: #fdfdfd;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.career-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.career-timeline {
		width: 40rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.career-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background-color: #ff8800;
		margin-top: 8rpx;
	}

	.career-line {
		width: 2rpx;
		flex-grow: 1;
		background-color: #ffcc99;
		margin-top: 10rpx;
	}

	.career-detail {
		flex: 1;
		padding-left: 20rpx;
	}

	.career-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}

	.career-company {
		font-size: 28rpx;
		color: #666;
		margin-top: 5rpx;
	}

	.career-time {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.career-desc {
		font-size: 26rpx;
		color: #666;
		margin-top: 10rpx;
		line-height: 1.5;
	}

	.cert-list {
		display: flex;
		flex-direction: column;
	}

	.cert-item {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.cert-item text {
		margin-left: 10rpx;
	}

	.contact-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 14rpx 0;
		flex-wrap: wrap;
	}

	.contact-label {
		width: 200rpx;
		color: #8E5A33;
		font-weight: 500;
		font-size: 28rpx;
	}

	.contact-value {
		color: #333333;
		margin: 0 10rpx;
		font-size: 28rpx;
	}

	.contact-button {
		margin-left: 10rpx;
		font-size: 24rpx;
		line-height: 1.8;
		padding: 0 20rpx;
		border-radius: 30rpx;
		transition: all 0.3s;
	}

	.contact-button:active {
		transform: scale(0.95);
		opacity: 0.9;
	}


	.primary-button {
		background-color: #a79900;
		color: #FFFFFF;
		border: none;
		font-weight: bold;
		font-size: 26rpx;
		padding: 8rpx 24rpx;
		box-shadow: 0 4rpx 8rpx rgba(255, 119, 51, 0.3);
		transform: scale(1.05);
	}

	.copy-button {
		background-color: #ffc80250;
		color: #E86A23;
		border: 1px solid #ff9d00;
	}

	.call-button {
		background-color: #ffc80250;
		color: #E86A23;
		border: 1px solid #ff9d00;
	}

	.privacy-notice {
		color: #E86A23;
		font-size: 24rpx;
		line-height: 1.6;
		margin-top: 10rpx;
		padding: 10rpx;
		background-color: #FFF0E0;
		border-radius: 8rpx;
	}
</style>